iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 15
1
自我挑戰組

30 天 CSS 隨手筆記系列 第 15

30 天 CSS 隨手筆記 - 第 15 天 - Shapes ~!!

  • 分享至 

  • xImage
  •  

編輯中,僅請見諒 m(_ _)m


也是前陣子看到這個效果,覺得真的超棒的~!!
https://www.w3.org/TR/css-shapes/
( 但如果形狀很複雜的話,其實要自己寫有點麻煩,還是需要 UI 好夥伴的支援。 )

一般在網頁上放的 jpg / png / gif 都是方方的,看起來就比較死板;
但設定了 CSS Shapes 後就可以讓改變圖片的形狀,跟文字的排版能靈活一點了。

像是番茄就可以圓圓的

來源:http://labs.jensimmons.com/examples/shapes-1.html

支援度也不錯


來源:http://labs.jensimmons.com/examples/images/blackberry.png

而且就算不支援,也只是恢復成方方的形狀而已,並不會有太大的狀況。


主要有三個相關的屬性:shape-outside、shape-image-threshold、shape-margin

shape-outside

預設: none
允許的值: none / 盒模型範圍 / 基本形狀 / 參考圖片

盒模型範圍

margin-box / border-box / padding-box / content-box
概念跟 background-clip 差不多

基本形狀

  1. inset
  2. circle
  3. ellipse
  4. polygon

參考圖片

  1. url
  2. attr

shape-image-threshold*

預設: 0
允許的值: 0 到 1 之間的值

如果 shape-outside 設定的是參考某張圖的話,可以使用這個值,告訴瀏覽器應該要取多少透明度以上的像素點。

黑莓的 shape 範例 來微調一下後
https://jsfiddle.net/lazy_shyu/k7fuq79c/
調整的部分有:

  1. 改拿黑莓本身的圖來當 shape-outside 的參考
  2. 不預設 shape-image-threshold ( 所以就是 0 了 )
  3. hover 圖片時,shape-image-threshold 設為 0.9

shape-margin

預設: 0
允許的值: 長度 / 百分比

跟一般的 margin 類似,但只接受一個值,是從本體的形狀往外算的留白空間。

剛剛的葡萄 shape 範例 來稍微改一下,就可以看到效果了。

沒有設定 shape-margin 的狀況 設定了 shape-margin: 5px 的狀況

|
右邊的圖中可以看出,文字跟紫色部分的距離增加了~
( 紫色部分是用 shape-outside 設定的本體 )


上一篇
30 天 CSS 隨手筆記 - 第 14 天 - filter~!!
下一篇
30 天 CSS 隨手筆記 - 第 16 天 - feature query ~!!
系列文
30 天 CSS 隨手筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
JerryHong
iT邦新手 5 級 ‧ 2016-12-31 00:05:52

撐下去啊!! 一半了

lazy_shyu iT邦新手 5 級 ‧ 2016-12-31 00:47:25 檢舉

救命 RRRRR
XD

我要留言

立即登入留言